<template>


    <a-modal
        :bodyStyle="{maxHeight: maxHeight+'px', overflow: 'auto' }"
        :destroyOnClose="true"
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        :maskClosable="true"
        @ok="ok"
        @cancel="cancel"
        v-drag
        cancelText="关闭"
        :ok-button-props="{ props: { shape:'round'} }"
        :cancel-button-props="{ props: { shape:'round'} }">
        
        
        <div class="table-page-search-wrapper">
            <a-row :gutter="[2,2]">
                <a-col :span="10">
                    <a-card :bordered="false">
                    <LTable 
                        ref="entityInfoList"
                        size="small"
                        rowKey="keyId"
                        :columns="entityColumns"
                        axiosUrl="/SysEntityInfoController/page"
                        :initQuery="[{field:'systemNo',val:defaultSettings.systemNo}]"
                        :showPagination="true"
                        :showQueryForm="true"
                        :customRow="customRow"
                        :rowClassName="tableRowClass"
                        :formAttributes="formAttributes"
                        >
                        <span slot="action" slot-scope="text, record">
                            <a-descriptions :title="record.arrivalCode" :column="1">
                                <a-descriptions-item label="备注">
                                    {{record.entityDesc}}
                                </a-descriptions-item>
                                <a-descriptions-item label="实体名称">
                                    {{record.entityClassName}}
                                </a-descriptions-item>
                            </a-descriptions>
                        </span>
                    </LTable>
                    </a-card>
                </a-col>
                <a-col :span="14">
                
                    <LTable 
                        ref="eneityFieldList"
                        size="middle"
                        rowKey="keyId"
                        :columns="fieldColumns"
                        axiosUrl="/SysEntityFieldController/list"
                        :showPagination="false"
                        :showQueryForm="false"
                        :rowSelection="{onChange: onSelectChange }"
                        :isAutoLoad="false"
                    >
                        
                    </LTable>
                
                </a-col>
            </a-row>
           
        </div>
   

    </a-modal>
    
        

</template>

<script>
import LTable from '@/components/lt/LTable'
import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'


export default {
    name:'selectEntityField',
    mixins:[SysMixin],
    components:{
        LTable
    },
    props:{
        
    },
    data(){
        return{
            maxHeight:800,
            width:document.documentElement.clientWidth-600,
            confirmLoading:false,
            visible:false,
            title:"标题",
            defaultSettings,
            selectedRowKeys:[],
            selectedRows:[],
            entityColumns:[
              
                {
                    title: '实体信息',
                    dataIndex: 'action',
                    width: '150px',
                    scopedSlots: { customRender: 'action' }
                }
             
            ],
            fieldColumns:[
                {
                    title: '序号',
                    dataIndex: '',
                    key:'rowIndex',
                    width:60,
                    align:"center",
                    customRender:function (t,r,index) {
                      return parseInt(index)+1;
                    }
                },
                {
                    title: '数据库字段',
                    dataIndex: 'dbField'
                    
                },
                {
                    title: '实体字段代码',
                    dataIndex: 'entityField'
                    
                },
                {
                    title: '实体字段标题',
                    dataIndex: 'entityFieldTitle'
                },
              
            ],
            selectedRecord:{},
            formAttributes:[
                {field:'entityClassName',label:'实体名',component:'input',condition:'like'},
                {field:'entityDesc',label:'备注',component:'input',condition:'like'},
            ],
        }
    },
    methods:{
        edit () {
            this.visible = true
            
        },
        customRow(record){
            return{
                on:{
                    click:(e)=>{
                        this.selectedRecord = record
                        this.$refs['eneityFieldList'].setInitQuery([{field:'entityClassName',val:record.entityClassName}])
                        this.$refs['eneityFieldList'].searchQuery()
                    }
                }
            }
        },
        tableRowClass(record,index){
            if (this.selectedRecord && this.selectedRecord.keyId==record.keyId){
                return "selectRowClass"
            }else{
                return ""
            }
            
        },
        onSelectChange (selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
        },
        getSelectedRows(){
            return this.selectedRows
        },
        //取消选择
        onCancelSelect(){
            this.selectedRowKeys=[]
            this.selectedRows=[]
            this.$refs["eneityFieldList"].selectedRows=[]
            this.$refs["eneityFieldList"].selectedRowKeys=[]
        },
        ok(){
            let that = this
            this.$emit('onAddField',this.selectedRows)
            that.close()
        
        },
        cancel(){
            this.close()
        },
        close () {
            this.visible=false
        },
    },
    mounted(){
       
    },
    created(){
        
    }
}
</script>
<style lang="less" scoped>
    @import "../../../layouts/BasicLayout.less";
    ::v-deep .selectRowClass{
        background-color:var(--primary-color) !important;
    }
</style>

<style scoped>
::v-deep .ant-descriptions-title {
    margin-bottom: 1px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}

::v-deep .ant-descriptions-row > td {
     padding-bottom: 1px;
}
</style>